<template>
    <Header />

    
    <div class="exhibition-container2 hidden-sm-and-up">
        <div class="swiper-container">
            <div class="block">
                <el-carousel height="400px" interval="5000">
                    <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                        <img class="swiper-image"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <!-- {{ item.src }} -->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="ex-info-container">
            <div class="ex-title">
                2024 年广州会展业创新发展峰会
            </div>
            <div class="ex-info">
                <div class="left-info">
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Clock />
                        </el-icon>
                        2024 / 01 / 13 10:00
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Location />
                        </el-icon>
                        广东省琶洲市九星大地会展中心
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <OfficeBuilding />
                        </el-icon>
                        展馆：深圳国际会展中心
                    </div>
                </div>
                <div class="daohang">
                    <img src="../static/dh.jpg" alt="">
                    <text>导 航</text>
                </div>
            </div>
        </div>
        <div class="map-contaienr">
            <div class="left-map">
                <!-- <img class="imgStyle" src="../static/map.jpg" alt=""> -->
            </div>
            <div class="right-info">
                <div class="top-icon">
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/exhibition-icon.png" alt="">
                        </div>
                        <div class="icon-title">
                            展商介绍
                        </div>
                    </div>
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/order.png" alt="">
                        </div>
                        <div class="icon-title">
                            订房须知
                        </div>
                    </div>
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/jiudian.png" alt="">
                        </div>
                        <div class="icon-title">
                            酒店预定
                        </div>
                    </div>
                </div>
                <div class="myorder-container">
                    <div class="left-text">
                        <div class="left-myorder">
                            我的订单
                        </div>
                        <div class="left-desri">
                            <p>查看您的会展预定信息</p>
                            <p>以及酒店预定记录</p>
                        </div>
                    </div>
                    <div class="right-arrow cursor" @click="goToMyOrder">
                        <img class="right-arrow-img" src="../static/miniIMG/right-arrow.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="yudin-container">
            <div>
                <el-icon :size="20">
                    <Service />
                </el-icon>
            </div>
            <div>
                <div>预订热线:</div>
                <p> 189 2380 1160 孔先生</p>
                <p>189 2380 1160 文小姐</p>
                <p>预定前请跟预订员确认订单信息</p>
                <p>邮箱：kong@sdlm.cn / wenmeiqi@sdlm.cn</p>

            </div>
            <div class="contact">
                <img src="../static/wechat.png" alt="">
                <div>查看二维码</div>
            </div>
        </div>

        <div class="exhibition-hotel">
            <div class="ex-title">
                展会酒店
            </div>
            <phoneHotel v-for="item in 3" :key="item" @click="gotoHotelDetail"
                :imageUrl="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                :hotelName="'深圳海棠湾君悦酒店'" :hotelAddress="'杭州市余杭区高教路970号'" :originalPrice="2000" :discountedPrice="340"
                :distance="'距离展会1.2km'" />
        </div>
    </div>
    <div class="exhibition-container hidden-xs-only">
        <div class="swiper-container">
            <div class="block">
                <el-carousel height="400px" interval="5000">
                    <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                        <img class="swiper-image"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <!-- {{ item.src }} -->
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="ex-info-container">
            <div class="ex-title">
                2024 年广州会展业创新发展峰会
            </div>
            <div class="ex-info">
                <div class="left-info">
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Clock />
                        </el-icon>
                        2024 / 01 / 13 10:00
                    </div>
                    <div class="info-item">
                        <el-icon style="margin-right:10px">
                            <Location />
                        </el-icon>
                        广东省琶洲市九星大地会展中心
                    </div>
                    <div class="info-item" style="font-weight:700">
                        展馆：深圳国际会展中心
                    </div>
                </div>
                <div class="right-info">
                    <div class="info-item">
                        预定前请跟预订员确认订单信息
                    </div>
                    <div class="info-item">
                        邮箱：kong@sdlm.cn / wenmeiqi@sdlm.cn
                    </div>
                    <div class="info-item">
                        预订热线: 189 2380 1160 孔先生
                    </div>
                    <div class="info-item">
                        <span style="width:68.23px;display:inline-block;"></span> 189 2380 1160 文小姐
                    </div>
                </div>
            </div>
        </div>
        <div class="map-contaienr">
            <div class="left-map">
                <div id="container" class="imgStyle">
                    <Map />
                </div>
                <!-- <img class="imgStyle" src="../static/map.jpg" alt=""> -->
            </div>
            <div class="right-info">
                <div class="top-icon">
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/exhibition-icon.png" alt="">
                        </div>
                        <div class="icon-title">
                            展商介绍
                        </div>
                    </div>
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/order.png" alt="">
                        </div>
                        <div class="icon-title">
                            订房须知
                        </div>
                    </div>
                    <div class="icon-item">
                        <div class="btn-bg">
                            <img class="icon-img" src="../static/miniIMG/jiudian.png" alt="">
                        </div>
                        <div class="icon-title">
                            酒店预定
                        </div>
                    </div>
                </div>
                <div class="myorder-container">
                    <div class="left-text">
                        <div class="left-myorder">
                            我的订单
                        </div>
                        <div class="left-desri">
                            <p>查看您的会展预定信息</p>
                            <p>以及酒店预定记录</p>
                        </div>
                    </div>
                    <div class="right-arrow cursor" @click="goToMyOrder">
                        <img class="right-arrow-img" src="../static/miniIMG/right-arrow.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="exhibition-hotel">
            <div class="ex-title">
                展会酒店
            </div>
            <div class="hotel-item" v-for="item in 3">
                <div class="hotel-name">
                    <div>
                        深圳海棠湾君悦酒店
                    </div>
                    <div>
                        <el-rate disabled size="large" v-model="hotelStar" />
                    </div>
                </div>
                <div class="hotel-address">
                    <div>
                        三亚 海棠区 海棠湾镇海棠北路68号
                    </div>
                    <div class="showMap">
                        显示地图
                    </div>
                </div>
                <div class="peizhi">
                    大床/双床/早餐
                </div>
                <div class="hotel-content">
                    <div class="hotel-imgs">
                        <el-carousel>
                            <el-carousel-item v-for="item in 4" :key="item">
                                <img class="swiper-image" src="../static/image.png" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="info-container">
                        <div class="price-container">
                            <div class="origin-price">
                                门市价: ￥ 2000
                            </div>
                            <div class="price">
                                <span>¥</span>
                                <span class="real-price" style="margin-bottom: 12px;">637</span>
                                <span>起</span>
                            </div>
                            <div class="tag">
                                <el-tag size="large">距展会1.2km</el-tag>
                            </div>
                        </div>
                        <div class="hotel-info">
                            深圳国际会展中心希尔顿酒店位于深圳市宝安区福海街道的会展新城片区，紧邻亚太区综...
                        </div>
                        <div class="map-contaienr2">
                            <div class="hotel-map">
                                <!-- <div id="container" class="imgStyle">
                                    <Map />
                                </div> -->
                                <img class="mini-map" src="../static/map.jpg" alt="">
                            </div>
                            <div class="map-into">
                                <div class="map-juli">
                                    <div>
                                        地铁1.1km
                                    </div>
                                    <div>
                                        飞机8.1km
                                    </div>
                                    <div>
                                        火车站1.2km
                                    </div>
                                </div>
                                <div class="watchMap">
                                    查看地图
                                </div>

                            </div>
                        </div>
                        <div class="service">
                            <div>24小时前台服务</div>
                            <div class="cursor" @click="gotoHotelDetail">详情</div>
                        </div>
                    </div>
                </div>
                <div class="hotel-room">
                    <div class="room-intro">
                        <div class="room-img">
                            <img src="../static/image.png" alt="">
                        </div>
                        <div class="room-guige">
                            <p>床型:2张1.5m大床</p>
                            <p>面积:68㎡</p>
                            <p>窗户:有窗</p>
                            <p>房型特色:宽敞现代的68平米客房，拥有全景落地玻璃窗坐赏度假村景观及海棠湾山景。房间配备各种特色设施，包含宽大浴缸，用餐区，办公区及配有舒适躺椅的独立阳台。</p>
                        </div>
                        <div class="room-name">
                            <div class="name">
                                双人标间
                            </div>
                            <div class="room-descri">
                                双床 含早餐 免费上网 无班车
                            </div>
                            <div class="room-num">
                                剩余12间
                            </div>
                        </div>
                    </div>
                    <div class="choose-room">
                        <div class="room-zaocan">
                            <span>2份早餐</span><span class="blueText mlr5"> |</span> <span>不可取消</span>
                        </div>
                        <div class="room-price">
                            <div class="price-contaienr">

                                <div class="price">
                                    <span>¥</span>
                                    <span class="real-price" style="margin-bottom: 12px;">637</span>
                                    <span>起</span>
                                </div>
                                <div class="origin-price">
                                    门市价: ￥ 2000
                                </div>
                            </div>
                            <div class="yudin-btn">
                                <router-link to="/orderInfo">
                                    <el-button type="primary" size="large">预定</el-button></router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer />
</template>

<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import { ref } from 'vue'
    import Footer from '@/components/Footer.vue'
    import phoneHotel from '@/components/phoneHotel.vue'
    import router from '@/router'
    import Map from '@/components/Map.vue'

    const gotoHotelDetail = () => {
        console.log('gotoHotelDetail')
        router.push({
            name: 'hotelDetail',
        })
    }
    const hotelStar = ref(4)
    const phoneRate = ref(4)
    const goToMyOrder = () => {
        console.log('goToMyOrder')
        router.push({
            name: 'myOrder',
        })
    }
    // 轮播图list
    const swiperList = [
        {
            id: 1,
            src: '../static/s1.jpg'
        },
        {
            id: 2,
            src: '../static/s2.jpg'
        },
        {
            id: 3,
            src: '../static/s3.jpg'
        },
        {
            id: 4,
            src: '../static/image.png'
        }
    ]
</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .exhibition-container2 {
        .mini-hotel-item {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 0 0 10px 10px !important;
            box-shadow: 0px 4px 10px 0px #EDF3FD;
            border-radius: 5px;
            margin-bottom: 20px;

            .img-container {
                width: 100%;
                border-radius: 10px 10px 0 0;

                .imgStyle {
                    width: 100%;
                    border-radius: 10px 10px 0 0;

                    object-fit: cover;
                }
            }

            .hotel-info {
                width: 100%;
                padding: 10px 20px;

                .hotel-name {
                    font-size: 24px;
                    font-weight: 500;
                    margin-bottom: 6px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 24px;
                    }
                }

                .hotel-address {
                    margin-bottom: 6px;

                    color: #817F7F;
                }

                .priceAndRate {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .door-price {

                        .real-door-price {
                            font-size: 12px;
                            margin-right: 5px;
                            color: #817F7F;
                            text-decoration: line-through;
                        }

                        //删除线

                        span {
                            color: #356CEB;
                            font-size: 16px;

                        }

                        .real-price {
                            color: #356CEB;
                            font-weight: 600;
                            font-size: 24px;
                        }
                    }
                }
            }

            .juli-tag {
                position: absolute;
                top: 20px;
                right: 20px;
                color: #356CEB;
                border-radius: 10px;
                font-weight: 600;
            }
        }

        .yudin-container {
            display: flex;
            padding: 20px;
            justify-content: space-around;
            color: #3D3D3D;
            font-size: 12px;

            .contact {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 30px;
                    height: 30px;
                }
            }


        }

        .exhibition-hotel {
            padding: 20px;

            margin: 0 auto;

            .ex-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .hotel-item {
                background-color: #FAFAFA;
                padding: 20px;
                padding: 20px;
                border-radius: 5px;
                margin-bottom: 20px;

                .hotel-room {
                    background-color: #fff;
                    padding: 20px;
                    margin-top: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;

                    .room-intro {
                        display: flex;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;

                        .room-img {
                            width: 30%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .room-guige {
                            width: 40%;
                            margin-left: 20px;

                            p {
                                margin-bottom: 10px;
                            }
                        }

                        .room-name {
                            width: 28%;
                            margin-left: 20px;
                            margin-top: 30px;

                            .name {
                                font-size: 24px;
                                font-weight: 600;
                                margin-bottom: 10px;
                            }

                            .room-descri {
                                margin-bottom: 10px;
                            }

                            .room-num {
                                color: #356CEB;
                            }
                        }
                    }

                    .choose-room {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 20px;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;
                        margin-top: 20px;

                        .room-zaocan {
                            color: #356CEB;
                        }

                        .room-price {
                            display: flex;
                            align-items: center;

                            .price-contaienr {
                                margin-right: 80px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .origin-price {
                                    // 删除线
                                    text-decoration: line-through;
                                    color: #999;
                                }

                                .price {
                                    color: #356CEB;

                                    .real-price {

                                        font-size: 36px;
                                        margin: 0px 5px;
                                    }
                                }
                            }

                            .yudin-btn {
                                .el-button {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

                .hotel-name {
                    display: flex;
                    font-size: 28px;
                    margin-bottom: 20px;
                    font-weight: 500;
                    margin-right: 10px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 28px;
                    }
                }

                .hotel-address {
                    display: flex;

                    margin-bottom: 20px;

                    .showMap {
                        margin-left: 20px;
                        color: #356CEB;
                        cursor: pointer;
                    }
                }

                .peizhi {
                    margin-bottom: 20px;
                    color: #356CEB;
                }

                .hotel-content {
                    display: flex;
                    justify-content: space-between;

                    .hotel-imgs {
                        width: 55%;

                        .swiper-image {
                            width: 100%;
                            height: 300px;
                            object-fit: cover;
                        }
                    }

                    .info-container {
                        width: 40%;

                        .price-container {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .origin-price {
                                // 删除线
                                text-decoration: line-through;
                                color: #999;
                            }

                            .price {
                                display: flex;
                                align-items: center;
                                color: #356CEB;

                                .real-price {
                                    margin-bottom: 12px;
                                    font-size: 36px;
                                    margin: 0px 5px;
                                }
                            }

                            .tag {
                                display: flex;
                                text-align: right;
                            }
                        }

                        .hotel-info {
                            margin-bottom: 20px;
                        }

                        .map-contaienr2 {
                            display: flex;
                            width: 100%;

                            .hotel-map {
                                width: 100px;
                                height: 100px;

                                .mini-map {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }

                        .service {
                            display: flex;
                            justify-content: space-between;
                            color: #356CEB;
                            margin-top: 20px;
                        }

                        .map-into {
                            display: flex;
                            flex-direction: column;
                            width: 90%;

                            .map-juli {
                                width: 100%;
                                justify-content: space-around;
                                display: flex;
                            }

                            .watchMap {
                                color: #356CEB;
                                display: flex;
                                cursor: pointer;
                                margin-left: 12px;
                                margin-top: 30px;
                            }
                        }
                    }
                }
            }
        }

        .map-contaienr {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0 auto;

            .left-map {
                width: 100%;

                .imgStyle {
                    width: 100%;
                    object-fit: cover;
                }
            }

            .right-info {
                width: 100%;

                .top-icon {
                    display: flex;
                    justify-content: space-around;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .icon-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .btn-bg {
                            width: 60px;
                            height: 60px;
                            background-color: #356CEB;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 10px;

                            .icon-img {
                                width: 30px;
                                height: 30px;
                            }
                        }

                        .icon-title {
                            font-size: 14px;
                        }
                    }
                }

                .myorder-container {
                    display: flex;
                    background-color: #EDF3FD;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 5px;
                    padding: 20px;

                    .left-text {
                        color: #356CEB;

                        .left-myorder {
                            font-size: 18px;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }

                        .left-desri {
                            font-size: 14px;
                            color: #356CEB;
                        }
                    }

                    .right-arrow {
                        width: 40px;
                        height: 40px;

                        .right-arrow-img {
                            width: 100%;
                            height: 100%;

                        }
                    }
                }
            }
        }

        .swiper-container {
            background-color: #fff;

            margin: 0 auto;

            .swiper-image {
                width: 100%;
                height: 400px;
                object-fit: cover;
            }
        }

        .ex-info-container {
            padding: 20px;

            margin: 0 auto;

            .ex-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .ex-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-info {
                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        el-icon {
                            margin-right: 10px;
                        }
                    }
                }

                .daohang {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    margin-bottom: 20px;
                    color: #356CEB;

                    img {
                        width: 50px;
                        height: 50px;

                    }
                }
            }
        }
    }

    .exhibition-container {

        .exhibition-hotel {
            padding: 20px;
            width: $primary-max-width;

            margin: 0 auto;

            .ex-title {
                font-size: 38px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .hotel-item {
                background-color: #FAFAFA;
                padding: 20px;
                padding: 20px;
                border-radius: 5px;
                margin-bottom: 20px;

                .hotel-room {
                    background-color: #fff;
                    padding: 20px;
                    margin-top: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;

                    .room-intro {
                        display: flex;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;

                        .room-img {
                            width: 30%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .room-guige {
                            width: 40%;
                            margin-left: 20px;

                            p {
                                margin-bottom: 10px;
                            }
                        }

                        .room-name {
                            width: 28%;
                            margin-left: 20px;
                            margin-top: 30px;

                            .name {
                                font-size: 24px;
                                font-weight: 600;
                                margin-bottom: 10px;
                            }

                            .room-descri {
                                margin-bottom: 10px;
                            }

                            .room-num {
                                color: #356CEB;
                            }
                        }
                    }

                    .choose-room {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 20px;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #D8D8D8;
                        margin-top: 20px;

                        .room-zaocan {
                            color: #356CEB;
                        }

                        .room-price {
                            display: flex;
                            align-items: center;

                            .price-contaienr {
                                margin-right: 80px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .origin-price {
                                    // 删除线
                                    text-decoration: line-through;
                                    color: #999;
                                }

                                .price {
                                    color: #356CEB;

                                    .real-price {

                                        font-size: 36px;
                                        margin: 0px 5px;
                                    }
                                }
                            }

                            .yudin-btn {
                                .el-button {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

                .hotel-name {
                    display: flex;
                    font-size: 28px;
                    margin-bottom: 20px;
                    font-weight: 500;
                    margin-right: 10px;

                    .el-rate {
                        margin-left: 10px;
                        font-size: 28px;
                    }
                }

                .hotel-address {
                    display: flex;

                    margin-bottom: 20px;

                    .showMap {
                        margin-left: 20px;
                        color: #356CEB;
                        cursor: pointer;
                    }
                }

                .peizhi {
                    margin-bottom: 20px;
                    color: #356CEB;
                }

                .hotel-content {
                    display: flex;
                    justify-content: space-between;

                    .hotel-imgs {
                        width: 55%;

                        .swiper-image {
                            width: 100%;
                            height: 300px;
                            object-fit: cover;
                        }
                    }

                    .info-container {
                        width: 40%;

                        .price-container {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .origin-price {
                                // 删除线
                                text-decoration: line-through;
                                color: #999;
                            }

                            .price {
                                display: flex;
                                align-items: center;
                                color: #356CEB;

                                .real-price {
                                    margin-bottom: 12px;
                                    font-size: 36px;
                                    margin: 0px 5px;
                                }
                            }

                            .tag {
                                display: flex;
                                text-align: right;
                            }
                        }

                        .hotel-info {
                            margin-bottom: 20px;
                        }

                        .map-contaienr2 {
                            display: flex;
                            width: 100%;

                            .hotel-map {
                                width: 100px;
                                height: 100px;

                                .mini-map {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }

                        .service {
                            display: flex;
                            justify-content: space-between;
                            color: #356CEB;
                            margin-top: 20px;
                        }

                        .map-into {
                            display: flex;
                            flex-direction: column;
                            width: 90%;

                            .map-juli {
                                width: 100%;
                                justify-content: space-around;
                                display: flex;
                            }

                            .watchMap {
                                color: #356CEB;
                                display: flex;
                                cursor: pointer;
                                margin-left: 12px;
                                margin-top: 30px;
                            }
                        }
                    }
                }
            }
        }

        .map-contaienr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            width: $primary-max-width;
            margin: 0 auto;

            .left-map {
                width: 60%;

                .imgStyle {
                    width: 100%;
                    height: 400px;
                    object-fit: cover;
                }
            }

            .right-info {
                width: 35%;

                .top-icon {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 50px;

                    .icon-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .btn-bg {
                            width: 60px;
                            height: 60px;
                            background-color: #356CEB;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 10px;

                            .icon-img {
                                width: 30px;
                                height: 30px;
                            }
                        }

                        .icon-title {
                            font-size: 14px;
                        }
                    }
                }

                .myorder-container {
                    display: flex;
                    background-color: #EDF3FD;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 5px;
                    padding: 20px;

                    .left-text {
                        color: #356CEB;

                        .left-myorder {
                            font-size: 18px;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }

                        .left-desri {
                            font-size: 14px;
                            color: #356CEB;
                        }
                    }

                    .right-arrow {
                        width: 40px;
                        height: 40px;

                        .right-arrow-img {
                            width: 100%;
                            height: 100%;

                        }
                    }
                }
            }
        }

        .swiper-container {
            background-color: #fff;

            margin: 0 auto;

            .swiper-image {
                width: 100%;
                height: 400px;
                object-fit: cover;
            }
        }

        .ex-info-container {
            padding: 20px;
            width: $primary-max-width;
            margin: 0 auto;

            .ex-title {
                font-size: 38px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .ex-info {
                display: flex;

                .left-info {
                    margin-right: 150px;

                    .info-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;

                        el-icon {
                            margin-right: 10px;
                        }
                    }
                }

                .right-info {
                    .info-item {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
</style>